<template>
<div class="ME">
  <div class="me-image" :style="{backgroundImage:'url(' + bgSrc + ')'}">
    <div>
      <i class="el-icon-picture"></i>
    </div>
    <div class="image-avater">
      <el-avatar :src="userImage"></el-avatar>
    </div>
  </div>
  <div class="EXTRE">
    <span class="extre-QR">
      <img :src="QRImage" alt="">
    </span>
    <span class="extre-change">
      <img :src="changeImage" alt="">
    </span>
  </div>
  <div class="TEXT" v-for="item in person" :key="item.id">
    <p class="text-name">{{item.name}}</p>
    <p class="text-univercity">
      <span class="university-school">{{item.school}}</span>
      <span class="university-course">{{item.course}}</span>
    </p>
    <p class="text-local">
      <span class="local-province">{{item.province}}</span>
      <span class="local-city">{{item.city}}</span>
    </p>
    <p class="text-fans">
      <span class="fans-sum">{{item.fans}}+</span>
      <img :src="fansImage" alt="">
    </p>
  </div>
  <div class="POWER">
    <p>
      <span>{{powerTitle}}:</span>
      <span class="power-power">{{power}}</span>
    </p>
   <progress-component ref="message"></progress-component>
  </div>
</div>
</template>
<script>
import progressComponent from '../subComponent/Progress.vue'
export default {
  data () {
    return {
      bgSrc: require('@/assets/images/Main/Me/bg.jpg'),
      userImage: require('@/assets/images/Main/Me/user.jpg'),
      QRImage: require('@/assets/images/ICons/QR.png'),
      changeImage: require('@/assets/images/ICons/change.png'),
      fansImage: require('@/assets/images/ICons/fans.png'),
      powerTitle: '校园潮流值排名',
      power: '',
      person: [
        {
          id: 1,
          name: '卢大佐',
          school: '中国矿业大学',
          course: '电子商务系',
          province: '浙江',
          city: '杭州市',
          fans: 600
        }
      ]
    }
  },
  mounted () {
    // let mes = 5
    // setTimeout(() => {
    // }, 350)
    let mes = this.$refs.message.percentage
    console.log('the power is :' + mes)
    switch (mes) {
      case 10:
        this.power = '小试牛刀'
        break
      case 20:
        this.power = '不从众'
        break
      case 40:
        this.power = '出众'
        break
      case 60:
        this.power = '精英'
        break
      case 90:
        this.power = '传说人物'
        break
      case 100:
        this.power = 'XXX'
        break
      default:
        mes = 10
        this.power = '小试牛刀'
    }
  },
  computed: {
  },
  components: {
    progressComponent
  }
}
</script>
<style lang='scss'>
.ME {
  text-align: center;
  .me-image {
    width: 100%;
    height: 20ch;
    position: relative;
    margin-bottom: 10px;
    div {
      font-size: 30px;
      i {
        position: absolute;
        z-index: 10;
        bottom: 10px;
        left: 10px;
      }
    }
    .image-avater {
      span {
        border: 10px solid snow;
        margin-top: 16ch;
        height: 150px;
        width: 150px;
        img {
          height: 100%;
          width: 100%;
        }
      }
    }
  }
}
.EXTRE {
  float: right;
  span {
    padding: 10px;
      img {
      height: 20px;
      width: 20px;
    }
  }
}
.TEXT {
  margin-top: 100px;
  p {
    font-family: 微软雅黑;
    font-size: 16px;
    display: table;
    width: 100%;
    color: gray;
    padding: 0;
    span {
      font-weight: normal;
      width: 50%;
      display: table-cell;
      text-align: left;
      padding: 0 10px;
    }
    img {
      height: 40px;
      width: auto;
      float: left;
    }
    .university-school {
      text-align: right;
    }
    .local-province {
      text-align: right;
    }
    .fans-sum {
      width: 52%;
      text-align: right;
      vertical-align: middle;
    }
  }
  .text-name {
    font-weight: bolder;
    font-size: 26px;
    letter-spacing: 0.5px;
  }
}
.POWER {
  text-align: left;
  span{
    font-weight: bold;
    font-family: 微软雅黑;
    font-size: 14px;
    color: gray;
    margin: 5px;
  }
  .power-power{
    font-weight: bolder;
    font-size: 16px;
    color: black;
  }
}
</style>
